<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src='./dist/jquery-3.2.1.js'></script>
	<title></title>
</head>
<style type="text/css">
	div{
		background:#ccc;
		width:100%;
		height:200px;
	}
</style>
<body>
<h3>实例一</h3>
<div class="div1">
	    <h1>1aaaaaaaaaaaaaaaaaaa</h1>
		<h1>2aaaaaaaaaaaaaaaaaaa</h1>
		<h1>3aaaaaaaaaaaaaaaaaaa</h1>
</div>
<hr>
<div class="div2"></div>



<h3>实例二</h3>
<h1>000000000000000000000001</h1>
<h1>000000000000000000000002</h1>
<h1>000000000000000000000003</h1>
<h1>000000000000000000000004</h1>
<h1>000000000000000000000005</h1>
<h1>000000000000000000000006</h1>

<h3>实例三</h3>
<div>
	<img src="logo.jpg">
</div>


</body>
<script type="text/javascript">
//实例一
	$('.div1 h1').click(function(){
//内部插入--后面点击排后面
		$('.div2').append($(this));
		$(this).appendTo('.div2');

//内部插入--后面点击排前面
		$(this).prependTo('.div2');
		$('.div2').prepend($(this));

//外部插入后面追加---后面点击排前后
		$('.div2').after($(this));
		$(this).insertAfter('.div2');

//	外部插入前面追加--后面点击排后面
		$('.div2').before($(this));
		$(this).insertBefore('.div2');	
	})


//实例二
//1.包围
//用i标签外包围h1
$('h1').wrap('<i></i>');
//用i标签放在h1标签里面
$('h1').wrapInner('<i></i>');
//用一个i标签外包围所有h1
$('h1').wrapAll('<i></i>');
//2.替换
//用i标签外代替h1
$('h1').replaceWith('<p>kdjldsj</p>');
//用i标签外代替所有h1
$('<p>kdjldsj</p>').replaceAll('h1');
//代替
$('h1').click(function(){
	val=$(this).html();
	$(this).replaceWith('<p>'+val+'</p>');
});
//遍历代替
$('h1').each(function(){
	val=$(this).html();
	$(this).replaceWith('<p>'+val+'</p>');
})
//3.删除
$('h1').click(function(){
	//清空
$(this).empty();

//事件被移除对象保留
obj=$(this).remove();


//事件和对象被保留
obj=$(this).detach();
$('body').append(obj);
})





//实例三:复制
//只有图片第一个点击能克隆，其他被克隆的图片不具有该事件
$('img').click(function(){
	$(this).after($(this).clone());
});
//不仅图片第一个点击能克隆，而且被克隆的图片也具有该事件
$('img').click(function(){
	$(this).after($(this).clone(true));
});



</script>
</html>